<template>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

    <div class=" animate__animated animate__fadeIn">
        <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
            <thead>
                <tr>
                    <th>订单号</th>
                    <th>购买商品</th>
                    <th>数量</th>
                    <th>总金额</th>
                    <th>收件人</th>
                    <th>收件人电话</th>
                    <th>收件地址</th>
                    <th>订单状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="o in orders">
                    <td>{{ o.id }}</td>
                    <td>{{ o.commodity }}</td>
                    <td>{{ o.quantity }}</td>
                    <td>{{ o.amount }} CNY</td>
                    <td>{{ o.consignee }}</td>
                    <td>{{ o.phone_num }}</td>
                    <td>{{ o.address }}</td>
                    <td v-if="o.state == 'placed_an_order'">已下单</td>
                    <td v-if="o.state == 'shipped'">已发货 ({{ o.couriernum }})</td>
                    <td v-if="o.state == 'cancelled'">已取消</td>
                    <td>
                        <a v-if="o.state == 'placed_an_order'"
                            class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
                            @click="cancelButtonOnclick(o.id)">
                            不想要啦
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    setup() {
        return {}
    },
    data() {
        return {
            orders: null,
        }
    },
    created() {
        this.getOrder()
    },
    methods: {
        getOrder() {
            this.$axios({
                method: "post",
                url: "/welcome/showOrder",
            }).then((res) => {
                this.orders = res.data.data
            })
        },
        cancelButtonOnclick(id) {
            this.$axios({
                method: "post",
                url: "/welcome/cancel",
                params: {
                    "id": id
                }
            }).then((res) => {
                if (res.data.code == "0") {
                    this.$parent.msg("已取消")
                    this.$parent.$refs.orders.getOrder()
                } else {
                    this.$parent.msg(res.data.msg)
                    this.$parent.$refs.orders.getOrder()
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
td {
    color: dimgray;
    text-align: center;
}

th {
    text-align: center;
}
</style>